<template>
<el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl" custom-class="drawer-right-side" :before-close="closeDrawer">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" label-position="left" class="demo-ruleForm">
        <el-form-item label="父节点" prop="parent_id">
            <el-cascader v-model="ruleForm.parent_id" :options="tree" :props="{
            checkStrictly: true,
            label: 'title',
            value: 'id',
            emitPath: false,
          }" clearable></el-cascader>
        </el-form-item>

        <el-form-item label="节点标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="节点名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="路径" prop="path">
            <el-input v-model="ruleForm.path"></el-input>
        </el-form-item>

        <el-form-item label="Api" prop="Api">
            <el-input v-model="ruleForm.api"></el-input>
        </el-form-item>

        <el-form-item label="Icon" prop="icon">
            <div class="input-complex">
                <el-input v-model="ruleForm.icon" :suffix-icon="ruleForm.icon"></el-input>
            </div>
        </el-form-item>

        <el-form-item label="是否菜单" prop="is_menu">
            <el-select v-model="ruleForm.is_menu" placeholder="请选择">
                <el-option label="菜单" :value="1"></el-option>
                <el-option label="目录" :value="2"></el-option>
                <el-option label="事件" :value="3"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="上/下线" prop="status">
            <el-select v-model="ruleForm.status" placeholder="请选择">
                <el-option v-for="(item, index) in statusList" :key="index" :label="item.title" :value="item.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
            <el-input v-model="ruleForm.sort"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="saveDrawer('ruleForm')">保存</el-button>
        </el-form-item>
    </el-form>
</el-drawer>
</template>

<script>
import {
    getNodeTreeApi,
    readNodeApi,
    createNodeApi,
    saveNodeApi,
} from "@/api/auth/node";

let ruleForm = {
    id: "",
    parent_id: 0,
    title: "",
    name: "",
    path: "",
    api:"",
    icon: "",
    is_menu: "",
    status: 1,
    sort: 0,
};

export default {
    data() {
        return {
            formDrawer: {
                title: "",
                visible: false,
                method: "create",
            },
            tree: [],
            statusList: [{
                    id: 0,
                    title: "下架",
                },
                {
                    id: 1,
                    title: "上架",
                },
            ],
            ruleForm: Object.assign({}, ruleForm),
            rules: {
                // department_id: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
                title: [{
                        required: true,
                        message: "请输入节点标题",
                        trigger: "blur",
                    },
                    {
                        min: 1,
                        max: 100,
                        message: "长度在 1 到 100 个字符",
                        trigger: "blur",
                    },
                ],
                name: [{
                        required: true,
                        message: "请输入节点名称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 100,
                        message: "长度在 1 到 100 个字符",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {},
    methods: {
        // 获取列表信息
        getTree() {
            getNodeTreeApi().then((res) => {
                if (res.code == 200) {
                    this.tree = res.data.tree;
                } else {
                    this.$message.warning(res.msg);
                }
            });
        },
        showDrawerByCreate() {
            this.getTree();
            // 重置表单
            this.resetRuleForm();
            this.formDrawer.title = "创建节点";
            this.formDrawer.visible = true;
            this.formDrawer.method = "create";
        },
        showDrawerByEdit(row) {
            this.getTree();
            // 重置表单
            this.resetRuleForm();
            this.formDrawer.title = "编辑节点";
            this.formDrawer.visible = true;
            this.formDrawer.method = "edit";
            let that = this;
            let query = {
                id: row.id,
            };
            readNodeApi(query).then((res) => {
                if (res.code == "200") {
                    that.ruleForm = Object.assign({}, res.data.row);
                } else {
                    that.$message.error(res.msg);
                }
            });
        },
        // 保存编辑
        saveDrawer(formName) {
            let that = this;
            let drawer = this.formDrawer;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (drawer.method == "edit") {
                        saveNodeApi(that.ruleForm).then((res) => {
                            if (res.code == 200) {
                                that.$emit("getTableData");
                                that.resetRuleForm();
                                that.formDrawer.visible = false;
                                that.$message.success(res.msg);
                            } else {
                                that.$message.error(res.msg);
                            }
                        });
                    } else {
                        createNodeApi(that.ruleForm).then((res) => {
                            if (res.code == 200) {
                                that.$emit("getTableData");
                                that.resetRuleForm();
                                that.formDrawer.visible = false;
                                that.$message.success(res.msg);
                            } else {
                                that.$message.error(res.msg);
                            }
                        });
                    }
                } else {
                    this.$message("请填写完整并检查您的填写信息");
                }
            });
        },

        // 关闭抽屉时，清空内容
        closeDrawer() {
            this.resetRuleForm();
            this.formDrawer.visible = false;
        },
        resetRuleForm() {
            this.ruleForm = Object.assign({}, ruleForm);
        },
    },
};
</script>

<style lang="scss">
.demo-ruleForm {
    padding: 20px;

    .el-select {
        width: 100%;
    }

    /* input Number类型不要上下箭头 */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        /* -webkit-appearance: none; */
        appearance: none;
        /* margin: 0; */
    }

    .input-complex {
        display: flex;
        align-items: center;
    }
}
</style>
